<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="" id="" title="" asd="" data-id=""></div>
</body>
<script>
    // 复习

    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // 获取和操作属性节点
    // Element.getAttributeNode()
    // Element.setAttributeNode()
    // Element.getAttribute()
    // Element.setAttribute()
    // Element.removeAttribute()

    // 层级关系  (节点相关  元素相关)

    // parentNode parentElement
    // childNodes children
    // firstChild  firstElementChild
    // lastChild  lastElementChild

    // previousSibling  previousElementSibling
    // nextSibling      nextElementSibling


    // 增删改
    // document.createElement()
    // document.createTextNode();
    // document.createDocumentFragment()

    // ParentNode.appendChild(Node)
    // ParentNode.append(Node|string)
    // ParentNode.prepend(Node|string)

    // ParentNode.insertBefore(newNode,oldNode)

    // Element.remove()
    // ParentNode.removeChild(Node)

    // ParentNode.replaceChild(newNode,oldNode)
    
    // Element.cloneNode()


    // 元素节点的属性 => 元素节点 => 对象 => 存在修饰该元素的属性(官方给的/自定义)

    // 元素节点的属性   (通用)
    // Element => {
    //     value,
    //     innerHTML,
    //     innerText,
    //     className,
    //     classList,
    //     id,
    //     title,
    //     tagName,
    //     style:{  // 所有css属性的对象
    //         background,
    //         color,
    //     },
    //     clientWidth,
    //     clientHeight,
    //     scrollWidth,
    //     scrollHeight,
    //     scrollLeft,
    //     scrollTop,
    //     offsetLeft,
    //     offsetTop,
    // }

    // a=>{
    //     href,  (a/link)
    //     target
    // }

    // img => {
    //     src,  (img video script)
    //     alt
    // }

    // input =>{
    //     type,
    //     name,
    //     placeholder,
    //     value,
    //     min, (type="number/range")
    //     max,  (type="number/range")
    //     step, (type="number/range")

    //     disabled,
    //     required,
    //     checked, (单选框复选框)
    // }

    // textarea => {
    //     cols,
    //     rows,
    //     maxlength
    // }

    // select => {
    //     value,
    //     selectedIndex,
    //     selectedOptions,
    // }

    // video => {
    //     controls,
    //     muted,
    //     autoplay,
    //     loop,
    // }








</script>
</html>